<template>
  <div class="patient-overview">
    <div class="dashboard-header">
      <h2>控制台概览</h2>
      <div class="header-info">
        <span>欢迎回来, {{ userInfo.realName || userInfo.username }}</span>
        <el-tag type="info">患者</el-tag>
      </div>
    </div>
    
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #409eff;">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">病历总数</div>
              <div class="stat-value">8</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #67c23a;">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">预约记录</div>
              <div class="stat-value">3</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #e6a23c;">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">最近就诊</div>
              <div class="stat-value">2023-07-21</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #f56c6c;">
              <el-icon><Bell /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">待处理</div>
              <div class="stat-value">2</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="content-row">
      <el-col :span="12">
        <el-card class="recent-records">
          <template #header>
            <div class="card-header">
              <h3>最近病历记录</h3>
              <el-button type="text" @click="$router.push('/dashboard/patient/records')">查看全部</el-button>
            </div>
          </template>
          
          <el-table :data="recentRecords" style="width: 100%">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="hospital" label="医院" width="150" />
            <el-table-column prop="department" label="科室" width="100" />
            <el-table-column prop="doctor" label="医生" width="100" />
            <el-table-column prop="diagnosis" label="诊断结果" />
            <el-table-column label="操作" width="80">
              <template #default="scope">
                <el-button type="text" @click="viewRecord(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="upcoming-appointments">
          <template #header>
            <div class="card-header">
              <h3>即将到来的预约</h3>
              <el-button type="text" @click="$router.push('/dashboard/patient/appointments')">查看全部</el-button>
            </div>
          </template>
          
          <el-table :data="upcomingAppointments" style="width: 100%">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="time" label="时间" width="100" />
            <el-table-column prop="hospital" label="医院" width="150" />
            <el-table-column prop="department" label="科室" width="100" />
            <el-table-column prop="doctor" label="医生" width="100" />
            <el-table-column label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === '已确认' ? 'success' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="health-summary">
      <template #header>
        <div class="card-header">
          <h3>健康摘要</h3>
        </div>
      </template>
      
      <div class="health-content">
        <div class="health-item">
          <div class="health-label">过敏史</div>
          <div class="health-value">花粉、青霉素</div>
        </div>
        <div class="health-item">
          <div class="health-label">慢性病史</div>
          <div class="health-value">高血压</div>
        </div>
        <div class="health-item">
          <div class="health-label">血型</div>
          <div class="health-value">A型</div>
        </div>
        <div class="health-item">
          <div class="health-label">主治医生</div>
          <div class="health-value">张医生</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store'
import { Document, Calendar, Clock, Bell } from '@element-plus/icons-vue'

const authStore = useAuthStore()
const router = useRouter()

const userInfo = computed(() => authStore.userInfo || {})

const recentRecords = [
  { id: 1, date: '2023-07-21', hospital: '市中心医院', department: '内科', doctor: '张医生', diagnosis: '上呼吸道感染' },
  { id: 2, date: '2023-06-25', hospital: '人民医院', department: '眼科', doctor: '李医生', diagnosis: '结膜炎' },
  { id: 3, date: '2023-05-18', hospital: '中医院', department: '骨科', doctor: '王医生', diagnosis: '手腕扭伤' },
]

const upcomingAppointments = [
  { id: 1, date: '2023-07-28', time: '10:30', hospital: '市中心医院', department: '内科', doctor: '张医生', status: '已确认' },
  { id: 2, date: '2023-08-05', time: '14:00', hospital: '人民医院', department: '眼科', doctor: '李医生', status: '待确认' },
]

const viewRecord = (record) => {
  router.push({ name: 'PatientRecords', query: { recordId: record.id } })
}
</script>

<style scoped>
.patient-overview {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  border-radius: 8px;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  margin-right: 15px;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.content-row {
  margin-bottom: 20px;
}

.recent-records, .upcoming-appointments, .health-summary {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.health-content {
  padding: 15px;
}

.health-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.health-item:last-child {
  border-bottom: none;
}

.health-label {
  width: 100px;
  font-weight: bold;
  color: #606266;
}

.health-value {
  flex: 1;
}
</style>